<template>
  <div class="perInfo">
    <div class="tit">
      个人信息
      <span>個人情報</span>
    </div>

    <form class="mui-input-group form">
        <div class="mui-input-row">
          <label>头像</label>
          <img :src="imgUrl" alt="">
          <input @change="fileImage($event)" class="upload" type="file" accept="" value=""  />
        </div>
        <div class="mui-input-row">
          <label>昵称</label>
          <input type="text" class="mui-input-clear">
        </div>
        <div class="mui-input-row">
          <label>性别</label>
          <input type="text" class="mui-input-clear">
        </div>
        <div class="mui-input-row">
          <label>出生日期</label>
          <input type="text" class="mui-input-clear">
        </div>
    </form>
    <button @click="save" class="save">保存</button>
  </div>
</template>

<script>
import { Toast } from "mint-ui"
export default {

  data () {
    return {
      imgUrl:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4277838672,1563258613&fm=173&app=25&f=JPEG?w=218&h=146&s=39A2429556B3FBD810194F6F03008076'
    }
  },

  methods: {
    fileImage(e){
        var _this = this
        var file = e.target.files[0];
        var imgSize=file.size/1024;
        if(imgSize>200){
            alert('请上传大小不要超过200KB的图片')
        }else{
            var reader = new FileReader();
            reader.readAsDataURL(file); // 读出 base64
            
            reader.onloadend = ()=>{
                // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
                var dataURL = reader.result;
                
                this.imgUrl = dataURL
                
                // 下面逻辑处理
                // $.ajax({
                //     type:"post",
                //     url:"/v1/userSet",
                //     async:true,
                //     data:{
                //         avatar:dataURL,
                //         avatar_wx:1,
                //         token:token,
                //         uid:uid,
                //     },
                //     success:function(e){
                //         that.avatar=dataURL;
                //         alert('修改成功');
                //         $(".tsk").show().delay(1500).hide(0);
                //     }
                // });
            };
        }

    },
    save(){
      Toast('保存成功')
    }
  },

  created () {
  }
}
</script>

<style lang='less' scoped>
.perInfo{
  width:100%;
  position: relative;
  height:100%;
}
:before,:after{
  height:0 !important;
}
.mui-input-group .mui-input-row{
  height:60px;
  border-bottom: 1px solid #F8F8F8;
}
.mui-input-row:last-of-type{
  border-bottom:none;
}
.mui-input-row label{
  padding: 23px 20px;
  font-size: 14px;
}
.mui-input-row input {
  margin-top: 10px;
}
.save{
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
    border-radius: 15px;
    width:100%;
    font-size: 14px;
    color: #333333;
    position: absolute;
    bottom:20px;
    padding: 15px 0;
  }
.form{
  width:100%;
  background: #F2F2F2;
  box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
  border-radius: 15px;
  img,.upload{
    position: absolute;
    right:30px;
    top:10px;
    width:40px;
    height:40px;
    border-radius:20px;
  }
  .upload{
    opacity: 0;
  }
}
</style>
